<script setup>
  import {
    getExamListApi,
    delExamApi,
    publishExamApi,
    cancelPublishExamApi
  } from '@/api/exam'
  import { reactive, ref } from 'vue'
  import router from '@/router'

  // 表单
  const examQuery = reactive({
    pageNum: 1,
    pageSize: 3,
    startTime: '',
    endTime: '',
    title: ''
  })
  // 竞赛列表响应式数据
  const examList = ref([])
  // 记录总数响应式数据
  const total = ref(0)
  // 日期时间范围响应式数据
  const datetimeRange = ref([])
  getExamList()
  async function getExamList() {
    // 获取开始时间
    if (datetimeRange.value[0] instanceof Date) {
      examQuery.startTime = formatDateTime(datetimeRange.value[0])
    }
    // 获取结束时间
    if (datetimeRange.value[1] instanceof Date) {
      examQuery.endTime = formatDateTime(datetimeRange.value[1])
    }
    const resp = await getExamListApi(examQuery)
    examList.value = resp.list
    total.value = resp.totals
  }
  //日期时间格式化
  function formatDateTime(date) {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  }
  // 搜索
  const onSearch = () => {
    if (
      (Array.isArray(datetimeRange.value) &&
        datetimeRange.value.length === 2 &&
        datetimeRange.value[0] instanceof Date &&
        datetimeRange.value[1]) instanceof Date ||
      examQuery.title
    ) {
      getExamList()
    }
  }

  // 重置
  const onReset = () => {
    if (
      (Array.isArray(datetimeRange.value) &&
        datetimeRange.value.length === 2 &&
        datetimeRange.value[0] instanceof Date &&
        datetimeRange.value[1]) instanceof Date ||
      examQuery.title
    ) {
      examQuery.startTime = examQuery.endTime = examQuery.title = ''
      datetimeRange.value.length = 0
      getExamList()
    }
  }
  // 判断竞赛是否已经开始
  function isNotStartExam(exam) {
    const now = new Date() //当前时间
    return new Date(exam.startTime) > now
  }
  // 新增竞赛跳转到其它页面
  function onAddExam() {
    router.push('/examQuestion?type=add')
  }
  // 编辑竞赛跳转到其它页面
  async function onEdit(examId) {
    router.push(`/examQuestion?type=edit&examId=${examId}`)
  }
  // 删除竞赛
  async function onDelete(examId) {
    await delExamApi(examId)
    getExamList()
  }
  // 发布竞赛
  async function publishExam(examId) {
    await publishExamApi(examId)
    getExamList()
  }
  // 撤销竞赛
  async function cancelPublishExam(examId) {
    await cancelPublishExamApi(examId)
    getExamList()
  }
</script>
<script>
  export default {
    name: 'ExamPage'
  }
</script>
<template>
  <section class="app-container">
    <!-- 表单 -->
    <el-form label-position="top" :inline="true">
      <el-form-item label="创建日期">
        <el-date-picker
          v-model="datetimeRange"
          style="width: 240px"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="竞赛名称">
        <el-input
          placeholder="请您输入要搜索的竞赛名称"
          v-model="examQuery.title"
        ></el-input>
      </el-form-item>
      <el-form-item label="操作" class="nolabel">
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <div class="table-box">
      <el-button
        class="btn-add"
        type="primary"
        plain
        @click="onAddExam"
      >
        新增
      </el-button>
      <el-table
        :data="examList"
        :cell-style="{
          textAlign: 'center'
        }"
        :header-cell-style="{
          textAlign: 'center'
        }"
      >
        <el-table-column label="竞赛标题" prop="title" />
        <el-table-column
          label="竞赛开始时间"
          prop="startTime"
          width="180px"
        />
        <el-table-column
          label="竞赛结束时间"
          prop="endTime"
          width="180px"
        />
        <el-table-column
          label="是否开赛"
          prop="nickName"
          width="100px"
        >
          <template #default="{ row }">
            <div v-if="!isNotStartExam(row)">
              <el-tag type="warning">已开赛</el-tag>
            </div>
            <div v-else>
              <el-tag type="info">未开赛</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否发布" prop="status" width="100px">
          <template #default="{ row }">
            <div v-if="row.status == 0">
              <el-tag type="danger">未发布</el-tag>
            </div>
            <div v-if="row.status == 1">
              <el-tag type="success">已发布</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建用户" prop="createName" />
        <el-table-column
          label="创建时间"
          prop="createTime"
          width="180px"
        />
        <el-table-column label="操作" width="300px">
          <template #default="{ row }">
            <el-button
              v-if="row.status == 0 && isNotStartExam(row)"
              type="text"
              @click="onEdit(row.examId)"
            >
              编辑
            </el-button>
            <el-button
              v-if="row.status == 0 && isNotStartExam(row)"
              type="text"
              class="delete-btn"
              @click="onDelete(row.examId)"
            >
              删除
            </el-button>
            <el-button
              v-if="row.status == 1 && isNotStartExam(row)"
              type="text"
              @click="cancelPublishExam(row.examId)"
            >
              撤销发布
            </el-button>
            <el-button
              v-if="row.status == 0 && isNotStartExam(row)"
              type="text"
              @click="publishExam(row.examId)"
            >
              发布
            </el-button>
            <el-button type="text" v-if="!isNotStartExam(row)">
              已开赛，不允许操作
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="examQuery.pageNo"
        v-model:page-size="examQuery.pageSize"
        :total="total"
        :page-sizes="[2, 3, 5]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="getExamList"
        @current-change="getExamList"
      />
    </div>
  </section>
</template>
<style lang="scss" scoped></style>
